<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/serverUrl.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>

		<header class="mui-bar mui-bar-nav">
			<span id="refresh" class="mui-icon mui-icon-reload mui-pull-left"></span>
			<h1 class="mui-title">通知</h1>
		</header>
		<div class="mui-content">
			<!-- 通知列表 -->
			<ul class="mui-table-view" id="Msg">

			</ul>
			<br />
			<!-- 翻页按钮 -->
			<div style="text-align: center;">
				<button id="lastPage" type="button" style="width: 30%;" class="mui-btn">上一页</button>
				<button id="nextPage" type="button" style="width: 30%;" class="mui-btn">下一页</button>
			</div>
		</div>


	</body>
	<script type="text/javascript">
		var currentPage = 1;
		// 教师账户和学生账户分别从不同的URL获取未读通知
		var msgUrl = "";
		if (localStorage.getItem("teacher") == "true") {
			msgUrl = "notViewedMessagesOfTeacher";
		} else {
			msgUrl = "notViewedMessages";
		}
		// 封装翻页所需JSON
		var pageJson = {};
		var userJson = JSON.parse(localStorage.getItem("userInformation"));
		pageJson.pageNum = currentPage;
		pageJson.pageSize = 20;
		pageJson.user = userJson;
		// 自动获取学生获取通知列表
		$.ajax({
			//请求方式
			type: 'POST',
			dataType: 'json',
			url: serverUrl + msgUrl,
			headers: {
				'Content-Type': 'application/json;charset=utf-8'
			},
			data: JSON.stringify(pageJson),
			//请求成功
			success: function(data) {
				var strMsg = "";
				for (var i = 0; i < data.length; i++) {
					strMsg = strMsg + 
					"<li class='mui-table-view-cell mui-media' msgID='"+
					data[i].messageID +"'><a><img class='mui-media-object mui-pull-left' src='./img/msg.png'><div class='mui-media-body'>"+
					data[i].student.name +"&nbsp;&nbsp;:&nbsp;&nbsp;"+ data[i].lab.labName +"<p class='mui-ellipsis'>"+
					data[i].messageInf +"</p></div></a></li>";
					//将本条消息的json保存到本地，以方便在回复页面中使用
					localStorage.setItem("msgID"+data[i].messageID,JSON.stringify(data[i]) );
				}
				document.getElementById("Msg").innerHTML = strMsg;
			},
			//请求失败，包含具体的错误信息
			error: function(e) {
				
			}
		});

		// 点击按钮刷新页面
		document.getElementById("refresh").onclick = function(){
			location.reload();
		}
		
		
		// 翻页按钮点击事件
		document.getElementById("lastPage").addEventListener("tap", function() {
			if (currentPage == 1) {
				mui.toast("当前已经是第一页");
			} else {
				// 当前页减1
				currentPage = currentPage - 1;

				var pageJson = {};
				var userJson = JSON.parse(localStorage.getItem("userInformation"));
				pageJson.pageNum = currentPage;
				pageJson.pageSize = 20;
				pageJson.user = userJson;

				// 获取学生获取通知列表
				$.ajax({
					//请求方式
					type: 'POST',
					dataType: 'json',
					url: serverUrl + msgUrl,
					headers: {
						'Content-Type': 'application/json;charset=utf-8'
					},
					data: JSON.stringify(pageJson),
					//请求成功
					success: function(data) {
						var strMsg = "";
						for (var i = 0; i < data.length; i++) {
							strMsg = strMsg + 
							"<li class='mui-table-view-cell mui-media' msgID='"+
							data[i].messageID +"'><a><img class='mui-media-object mui-pull-left' src='./img/msg.png'><div class='mui-media-body'>"+
							data[i].student.name +"&nbsp;&nbsp;:&nbsp;&nbsp;"+ data[i].lab.labName +"<p class='mui-ellipsis'>"+
							data[i].messageInf +"</p></div></a></li>";
							//将本条消息的json保存到本地，以方便在回复页面中使用
							localStorage.setItem("msgID"+data[i].messageID,JSON.stringify(data[i]) );
						}
						document.getElementById("Msg").innerHTML = strMsg;
					},
					//请求失败，包含具体的错误信息
					error: function(e) {
						mui.toast("遇到了未知错误！");
					}
				});
			}
		});

		document.getElementById("nextPage").addEventListener("tap", function() {
			// 当前页加1
			currentPage = currentPage + 1;

			var pageJson = {};
			var userJson = JSON.parse(localStorage.getItem("userInformation"));
			pageJson.pageNum = currentPage;
			pageJson.pageSize = 20;
			pageJson.user = userJson;

			// 获取学生获取通知列表
			$.ajax({
				//请求方式
				type: 'POST',
				dataType: 'json',
				url: serverUrl + msgUrl,
				headers: {
					'Content-Type': 'application/json;charset=utf-8'
				},
				data: JSON.stringify(pageJson),
				//请求成功
				success: function(data) {
					var strMsg = "";
					for (var i = 0; i < data.length; i++) {
						strMsg = strMsg + 
						"<li class='mui-table-view-cell mui-media' msgID='"+
						data[i].messageID +"'><a><img class='mui-media-object mui-pull-left' src='./img/msg.png'><div class='mui-media-body'>"+
						data[i].student.name +"&nbsp;&nbsp;:&nbsp;&nbsp;"+ data[i].lab.labName +"<p class='mui-ellipsis'>"+
						data[i].messageInf +"</p></div></a></li>";
						//将本条消息的json保存到本地，以方便在回复页面中使用
						localStorage.setItem("msgID"+data[i].messageID,JSON.stringify(data[i]) );
					}
					document.getElementById("Msg").innerHTML = strMsg;
				},
				//请求失败，包含具体的错误信息
				error: function(e) {
					mui.toast("遇到了未知错误！");
				}
			});
		});

		// 通知项点击事件
		mui(".mui-content").on("tap", ".mui-table-view-cell", function(e) {
			var msgID = this.getAttribute("msgID");
			if (localStorage.getItem("teacher") == "true") {
				mui.openWindow({
					url: "requestMsg.html",
					extras: { //给子页面传值
						msgID: msgID
					},
					createNew: false, //不允许重复创建
					show: {
						autoShow: true,
						aniShow: "slide-in-right",
						duration: 100
					}
				});
			} else{
				mui.openWindow({
					url: "getMsg.html",
					extras: { //给子页面传值
						msgID: msgID
					},
					createNew: false, //不允许重复创建
					show: {
						autoShow: true,
						aniShow: "slide-in-right",
						duration: 100
					}
				});
			}
			
		});
	</script>
</html>
